<template>
  <div class="ComPosite">
      <div class="CPleft">
          <div class="CPleft1">
              <span>{{seller.foodScore}}</span><br style="background:url(blank)">
              <span>综合评分</span><br style="background:url(blank)">
              <span>高于周边商家{{seller.rankRate}}%</span>
          </div>
      </div>
      <div class="CPright">
          <div class="CPright1">
              <span>服务态度</span>
              <img v-for="(item) in Math.floor(seller.score)" :key="item" src="../assets/img/star36_on@2x.png" alt="">
              <img v-for="(val) in Math.ceil(5-Math.floor(seller.score))" :key="val" src="../assets/img/star36_half@2x.png" alt="">
              <span>{{seller.score}}</span>
          </div>
          <div class="CPright1">
              <span>配送速度</span>
            <img v-for="(it) in Math.floor(seller.serviceScore)" :key="it" src="../assets/img/star36_on@2x.png" alt="">
            <img v-for="(vv) in Math.ceil(5-Math.floor(seller.score))" :key="vv" src="../assets/img/star36_half@2x.png" alt="">
              <span>{{seller.serviceScore}}</span>
          </div>
          <div class="CPright1">
              <span>送达时间</span>
              <span style="color:rgb(147,153,159)">{{seller.ratingCount}}分钟</span>
          </div>
      </div>
  </div>
</template>

<script>

export default {
    data(){
    return{
        seller:[]
    }
},
    created:async function(){
    let {data} = await this.$http.get("api/getseller")
    this.seller=data
    }
}
</script>

<style lang="stylus" scoped>
w=100%; s1=24px; s2=28px; s3=32px; c=rgb(255,255,255);dw = 50%; bgc=#f3f5f7;
bgc1=rgb(7,17,27);bgc2=rgb(147,153,159);bgc3=rgb(255,153,0)
.ComPosite{
    width :w;
    height :214px;
    display: flex;
    border-bottom: 1px solid bgc2;
}
.CPleft{
   width 275px
   padding: 36px 0px;
}
.CPright{
     padding: 36px 48px;
     flex: 1;
}
.CPleft1{
    border-right: 1px solid rgba(7,17,27,.1)
    text-align: center
    span:nth-of-type(1){
        font-size: 48px
        color: bgc3;
        line-height: 56px
        margin-bottom: 12px;
    }
    span:nth-of-type(2){
        font-size: s1
        color: bgc1;
        line-height: s1
        margin-bottom: 16px;
    }
    span:nth-of-type(3){
        font-size: 20px
        color: bgc2;
        line-height: 20px
        margin-bottom: 12px;
    }
}
.CPright1{
    font-size: s1;
    margin-bottom: 16px
    height s1
    line-height: s1
    img{
        display: inline-block
        height: 100%
        margin-right: 12px
        vertical-align: middle
        float left
    }
    span:nth-of-type(1){
        color: bgc1;
         margin-right: s1;
         float left
    }
    span:nth-of-type(2){
        color: bgc3;
         float left
    }
}
</style>